<template>
	<!-- component/select_sku/select_sku.wxml -->
	<view class="my-dialog" v-if="flag">
		<view class="my-mask"></view>
		<view class="my-container">
			<view class="v-center between titleBar">
				<image @tap="hidePopup" class="close" src="/static/file/images/close.png"></image>
				<view class="proContent v-center">
					<view class="pro-img">
						<image :src="null == sku ? spu.Fhimg : sku.Fimg"></image>
					</view>
					<view class="proInfo">
						<view class="pro_price">
							￥
							<text
								style="font-size: 20px">{{ sku == null ? spu.Flowprice + '-' + spu.Fhighprice : sku.Fsaleprice + '' }}</text>
						</view>
						<view>
							<view class="stock">库存：{{ Fstocknum }}件</view>
							<view class="describe">
								<text v-if="muti">{{ selectSkus.length == 0 ? '请选择' : '已选:' }}</text>
								<text>{{ selectSkudesc }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sku_content">
				<view class="sku-item" v-for="(sku, idx) in skulist" :key="idx">
					<view class="sku-title">{{ sku.Fattr }}</view>

					<view class="wrap">
						<text @tap="selectSku" v-if="sku.Fattr" :data-index="idx + '-' + i" :data-info="sku"
							:data-value="item"
							:class="'item ' + (item.active ? 'active' : '') + ' ' + (!item.disabled | (item.disabled == 0) ? '' : 'disabled')"
							v-for="(item, i) in sku.Fvalues" :key="i">
							{{ item.Fvalue }}
						</text>
					</view>
				</view>
				<!-- 购买数量 -->
				<view class="numBar v-center between">
					<view>数量：</view>
					<view class="v-center end buynum">
						<text @tap="changeNum" data-type="sub" class="changeIcon">-</text>
						<input @input="inputNum" type="number" pattern="\d*" class="changeNum" :value="Fnum" />
						<text @tap="changeNum" data-type="add" class="changeIcon">+</text>
					</view>
				</view>
			</view>
			<view class="btnBar algin"
				@tap="parseEventDynamicCode($event, (Fnum > 0) & (Fstocknum > 0) ? 'confirm' : '')"
				:style="'background:' + ((Fnum > 0) & (Fstocknum > 0) ? color : '#aaa')">
				{{ (null == sku) | (Fstocknum > 0) ? '确定' : '库存不足' }}
			</view>
		</view>
	</view>
</template>

<script>
	// component/select_sku/select_sku.js 
	var util = require('../../utils/util.js');
	var api = require('../../utils/prom.js');
	export default {
		data() {
			return {
				flag: false,
				color: app.globalData.color,
				skulist: [],

				spu: {
					Fhimg: '',
					Flowprice: '',
					Fhighprice: ''
				},

				attr: {},

				sku: {
					Fimg: '',
					Fsaleprice: '',
					Fattr: '',
					Fvalues: []
				},

				Fstocknum: 0,
				Fnum: 1,
				selectSkus: [],

				//0-直接购买 1-加入购物车
				Fopt: 0,

				price: 0,
				selectSkudesc: '',
				muti: false,
				i: ''
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {},
		/**
		 * 组件的方法列表
		 */
		methods: {
			show(spu, Fopt) {
				var that = this;

				that.flag = true,
					that.spu = spu,
					that.attr = '请选择商品属性',
					that.price = 0,
					that.sku = null,
					that.Fstocknum = 0,
					that.Fnum = 1,
					that.skulist = [],
					that.selectSkus = [],
					that.Fopt = Fopt,
					that.selectSkudesc = '',
					that.muti = false

				var param = {
					token: uni.getStorageSync('token'),
					Fpid: spu.Fid
				};
				var url = 'SpSkuAttr';
				api.requestAll(url, 'get', param, function(res) {
					if (res.data == null || res.data.length == 0) {
						url = 'SpSku?token=' + uni.getStorageSync('token') + '&Fpid=' + spu.Fid;
						console.log(url);
						api.requestAll(url, 'post', [], function(res) {
							if (res.data.Code == 100) {
								app.globalData.doLogin();
								uni.showToast({
									title: '获取数据失败，请重试！'
								});
								return;
							} else if (res.data.Code != 0) {
								that.sku = null; 
								uni.showModal({
									title: '提示',
									content: '商品已售罄'
								});
							}
							if (null != res.data.Sku) {
								that.sku = res.data.Sku; 
								that.Fstocknum = res.data.Sku.Fstocknum;  
								return;
							}
							uni.showModal({
								title: '提示',
								content: '商品已售罄'
							});
						});
						return;
					} else {
						//初始化属性
						var skulist = res.data;
						skulist.map(function(item) {
							item.Fvalues = [];
							item.Fvalue.map(function(val) {
								item.Fvalues.push({
									Fvalue: val,
									active: false
								});
							});
						});
						that.skulist = skulist;
						that.muti = true; 
					}
				});
			},
			selectSku(e) {
				var that = this;
				var sku = e.currentTarget.dataset.info;
				var item = e.currentTarget.dataset.value;
				var selectSkus = that.selectSkus;
				var lastList = that.skulist;
				if (item.disabled == 1) {
					return;
				}
				var isFind = false;
				if (item.active) {
					for (var i in selectSkus) {
						var row = selectSkus[i];
						if (row.Fattr == sku.Fattr && row.Fvalue == item.Fvalue) {
							selectSkus.splice(i, 1);
							lastList.map(function(val) {
								if (val.Fattr == sku.Fattr) {
									val.Fvalues.map(function(v) {
										if (v.Fvalue == item.Fvalue) {
											v.active = false;
											isFind = true;
											return;
										}
									});
								} else {
									val.Fvalues.map(function(v) {
										if (v.disabled == 1) {
											v.disabled = 0;
										}
									});
								}
							});
							break;
						}
					}
					if (!isFind) {
						selectSkus.push({
							Fattr: sku.Fattr,
							Fvalue: item.Fvalue
						});
						lastList.map(function(val) {
							if (sku.Fattr == val.Fattr) {
								val.Fvalues.map(function(v) {
									if (v.Fvalue == item.Fvalue) {
										v.active = true;
										return;
									}
								});
							}
						});
					}
				} else {
					//假如属性名已存在则删除
					for (var i in selectSkus) {
						var row = selectSkus[i];
						if (row.Fattr == sku.Fattr) {
							selectSkus.splice(i, 1);
							lastList.map(function(val) {
								if (val.Fattr == sku.Fattr) {
									val.Fvalues.map(function(v) {
										v.active = false;
									});
								}
							});
							break;
						}
					}
					console.log(lastList);
					selectSkus.push({
						Fattr: sku.Fattr,
						Fvalue: item.Fvalue
					});
					lastList.map(function(val) {
						if (sku.Fattr == val.Fattr) {
							val.Fvalues.map(function(v) {
								if (v.Fvalue == item.Fvalue) {
									v.active = true;
									return;
								}
							});
						}
					});
				}
				that.skulist = lastList;
				that.selectSkus = selectSkus; 
				that.showdesc();
				console.log(that.skulist);
				var spu = that.spu;
				var url = 'SpSku?token=' + uni.getStorageSync('token') + '&Fpid=' + spu.Fid;
				if (selectSkus.length == 0) {
					that.sku = null; 
					return;
				}
				api.requestAll(url, 'post', selectSkus, function(res) {
					if (res.data.Code == 100) {
						app.globalData.doLogin();
						uni.showToast({
							title: '获取数据失败，请重试！'
						});
						return;
					} else if (res.data.Code != 0) {
						that.sku = null; 
					}
					if (null != res.data.Sku) {
						that.sku = res.data.Sku; 
						that.Fstocknum = res.data.Sku.Fstocknum; 
						return;
					}
					that.sku = null; 
					var skulist = that.skulist;
					skulist.map(function(val) {
						val.Fvalues.map(function(val1) {
							val1.disval = 1;
						});
						res.data.AttrList.map(function(item) {
							if (item.Fattr == val.Fattr) {
								val.Fvalues.map(function(val1) {
									if (val1.disval == 0) {
										return;
									}
									val1.disabled = 1;
									if (item.Fvalue == val1.Fvalue) {
										val1.disabled = 0;
										val1.disval = 0;
										return;
									}
								});
							}
						});
					});
					that.skulist = skulist;
					that.selectSkus = selectSkus;
					 
				});
			},
			showdesc() {
				var desc = '';
				this.selectSkus.map(function(val) {
					desc += val.Fattr + '【' + val.Fvalue + '】';
				});

				this.selectSkudesc = desc;

			},
			//加或者减少数量
			changeNum: function(e) {
				var that = this;
				var type = e.currentTarget.dataset.type;
				var num = parseInt(that.Fnum);
				if (type == 'add') {
					that.Fnum = num + 1; 
				} else {
					if (num == 0) {
						return;
					}
					if (num - 1 < 0) {
						that.Fnum = 0; 
					 
					} else {
						that.Fnum = num - 1; 
					}
				}
			},
			//输入数量
			inputNum: function(e) {
				var that = this;
				var num = e.detail.value;
				if (num < 0) {
					that.Fnum = 0; 
				} else {
					that.Fnum = num; 
				}
			},
			hidePopup() {				
				this.flag= false;
			},
			// 确认购买
			confirm() {
				if (Number(this.Fnum) > Number(this.Fstocknum)) {
					uni.showModal({
						title: '提示',
						content: '库存仅剩余=' + this.Fstocknum
					});
					return;
				}
				var param = {
					sku: this.sku,
					Fnum: this.Fnum,
					Fopt: this.Fopt
				};
				this.$emit('config', {
					detail: param
				});
			}
		},
		created: function() {}
	};
</script>
<style>
	@import './sqlsku.css';
</style>